<style jless='false'>
    .single-value{
        color:((themeColor))
    }
    .single-prop{
        ((bg))
    }
    ((commonClass))
    .border1{
        ((border['3px']))
    }
    .border2{
        ((border['3px','dashed']))
    }
    .border3{
        ((border['3px','dashed','#f44']))
    }
</style>
<div class='title'>css变量和函数</div>
<div class="sub">
    <div class='text'>
        variable属性用于定义css公共变量和函数。然后开发者可以在/src/css/common.css文件和 /src/html/目录下的所有Jet组件中使用css变量和方法。
    </div>
    <div class='text'>
        但是很遗憾，由于less对Jet定义的 公共变量和函数的语法不支持，会在编译的时候异常甚至报错，所以less与 Jet的css变量和函数体系的语法 不能同时用于同一个css标签或文件内。
        若是你在引入了less的情况下想使用 Jet的css变量体系，那么在使用的 style上使用 jless='false' 来在当前样式表中禁用less。
    </div>
    <div class='title' jump-des='var'>1.css变量</div>
    <div class='text'>
        在 css配置文件中的variable属性中以键值对的方式定义css变量，你可以定义一个值，一个完整的属性，甚至是一个选择器或是一个css片段，但是定义的写法必须符合js语法，你可以使用 <span class="red">` `</span> 来写多行的字符串，
        但是在某些浏览器中该写法兼容性不佳，推荐使用<span class="red">\</span>  来写多行的字符串。使用双重小括号 <span class="red">(())</span>来使用css变量。请看一个例子
    </div>    
    <div class='text'>
        css.conf 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
{
    variable:{
        themeColor:"#f44",
        bg:'background-color:#4f4',
        commonClass:".common-class{\
            font-weight:bold;\
            color:#88f;\
        }"
    },
    common:[
    ]
} 
        </div>
        使用双重小括号 <span class="red">(())</span>来使用css变量：
        <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;style jless='false'>
    .single-value{
        color:((themeColor))
    }
    .single-prop{
        ((bg))
    }
    ((commonClass))
&lt;/style>
&lt;div class='single-value'>单个值&lt;/div>
&lt;div class='single-prop'>单个属性&lt;/div>
&lt;div class='common-class'>选择器，css片段&lt;/div>    
        </div>
    </div>
    <div class='text'>
        以下是输出的结果：
        <div class='out'>
            <div class='single-value'>单个值</div>
            <div class='single-prop'>单个属性</div>
            <div class='common-class'>选择器，css片段</div>
        </div>
    </div>
    <div class='title' jump-des='func'>2.css函数</div>
    <div class='text indent'>
        variable属性同样可以定义css函数，也可以定义一个值，一个完整的属性，甚至是一个选择器或是一个css片段。
        在variable属性中使用 双花括号 <span class="red">{{index|default}}</span> 格式来使用变量，其中index指第几个参数，default是在参数为空的情况下的默认值。
        使用css函数时使用 <span class="red">((func[1,'string']))</span> 格式，方括号内是参数列表，请按照js中数组的语法填写，字符串需使用双引号括起来。使用请看一个例子
    </div>    
    <div class='text'>
        css.conf 文件：
        <div class='j-code not-test' disabled width='99%' height='auto'>
{
    variable:{
        border:"\
            border-left:{{1}} {{2|solid}} {{3|#fff}};\
            border-right:{{1}} {{2|solid}} {{3|#fff}};\
            padding:10px;\
            margin:10px;\
        ",
    },
    common:[
    ]
} 
        </div>
        common.css或者Jet组件中使用：
        <div class='j-code not-test' disabled width='99%' height='auto'>
&lt;style jless='false'>
    .border1{
        ((border['3px']))
    }
    .border2{
        ((border['3px','dashed']))
    }
    .border3{
        ((border['3px','dashed','#f44']))
    }
&lt;/style>
&lt;div class='single-value'>单个值&lt;/div>
&lt;div class='single-prop'>单个属性&lt;/div>
&lt;div class='common-class'>选择器，css片段&lt;/div>    
        </div>
    </div>
    <div class='text'>
        以下是输出的结果：
        <div class='out pxl'>
            <span class='border1'>启用一个参数</span>
            <span class='border2'>启用二个参数</span>
            <span class='border3'>启用三个参数</span>
        </div>
    </div>
</div>
<script>
</script>